<template>
  <view class="container">
    <!-- 顶部区域 -->
    <view class="top-area">
      <view class="user-info">
        <view class="user-avatar-section">
          <image :src="userInfo.avatar" class="user-avatar"></image>
          <view class="user-details">
            <text class="user-name">Hi, {{userInfo.name}}</text>
            <text class="user-level">{{userInfo.level}}</text>
          </view>
        </view>
        <view class="notification-bell" @click="goToNotifications">
          <image src="/static/images/volunteer/bell.png" class="bell-icon"></image>
          <view class="notification-dot" v-if="hasNewNotifications"></view>
        </view>
      </view>
      
      <view class="stats-cards">
        <view class="stat-card">
          <text class="stat-number">{{stats.completedServices}}</text>
          <text class="stat-label">已完成服务</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{stats.currentPoints}}</text>
          <text class="stat-label">当前积分</text>
        </view>
        <view class="stat-card">
          <text class="stat-number">{{stats.rating}}</text>
          <text class="stat-label">服务评分</text>
        </view>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box">
        <image src="/static/images/volunteer/search.png" class="search-icon"></image>
        <input 
          type="text" 
          placeholder="搜索服务任务..." 
          v-model="searchKeyword" 
          class="search-input"
          @confirm="searchTasks"
        />
        <button class="search-btn" @click="searchTasks">搜索</button>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="section-title">快捷功能</view>
    <view class="quick-actions">
      <view class="q-item" @click="goToAvailableTasks">
        <view class="action-icon-wrapper">
          <image src="/static/images/volunteer/task.png" class="action-icon"></image>
        </view>
        <text class="q-text">接单中心</text>
      </view>
      <view class="q-item" @click="goToMyServices">
        <view class="action-icon-wrapper">
          <image src="/static/images/volunteer/service.png" class="action-icon"></image>
        </view>
        <text class="q-text">我的服务</text>
      </view>
      <view class="q-item" @click="goToPointsMall">
        <view class="action-icon-wrapper">
          <image src="/static/images/volunteer/gift.png" class="action-icon"></image>
        </view>
        <text class="q-text">积分商城</text>
      </view>
      <view class="q-item" @click="goToTraining">
        <view class="action-icon-wrapper">
          <image src="/static/images/volunteer/training.png" class="action-icon"></image>
        </view>
        <text class="q-text">培训中心</text>
      </view>
    </view>

    <!-- 今日任务 -->
    <view class="section-title" style="display: flex; align-items: center; justify-content: space-between;">
      <view>今日任务</view>
      <navigator class="more_box" url="/pages/volunteer/taskList/taskList">查看全部></navigator>
    </view>
    <view class="task-list">
      <view 
        v-for="task in todayTasks" 
        :key="task.id" 
        class="task-card"
        @click="viewTaskDetail(task.id)"
      >
        <view class="task-header">
          <text class="task-title">{{task.title}}</text>
          <view :class="['task-tag', `task-${task.status}`]">
            <text>{{getStatusText(task.status)}}</text>
          </view>
        </view>
        <view class="task-info">
          <view class="info-item">
            <image src="/static/images/volunteer/time.png" class="info-icon"></image>
            <text class="info-text">{{task.time}}</text>
          </view>
          <view class="info-item">
            <image src="/static/images/volunteer/location.png" class="info-icon"></image>
            <text class="info-text">{{task.location}}</text>
          </view>
          <view class="info-item">
            <image src="/static/images/volunteer/user.png" class="info-icon"></image>
            <text class="info-text">{{task.elderlyName}} · {{task.elderlyAge}}岁</text>
          </view>
        </view>
        <view class="task-footer">
          <text class="task-reward">+{{task.reward}}积分</text>
          <button class="task-action-btn" @click.stop="handleTaskAction(task)">
            {{getActionText(task.status)}}
          </button>
        </view>
      </view>
    </view>

    <!-- 推荐服务 -->
    <view class="section-title" style="display: flex; align-items: center; justify-content: space-between;">
      <view>推荐服务</view>
      <navigator class="more_box" url="/pages/volunteer/serviceList/serviceList">了解更多></navigator>
    </view>
    <view class="services-grid">
      <view 
        v-for="service in recommendedServices" 
        :key="service.id" 
        class="service-card"
        @click="viewServiceDetail(service.id)"
      >
        <image :src="service.image" class="service-image"></image>
        <view class="service-content">
          <text class="service-name">{{service.name}}</text>
          <text class="service-desc">{{service.description}}</text>
          <view class="service-stats">
            <view class="stat">
              <image src="/static/images/volunteer/star.png" class="stat-icon"></image>
              <text class="stat-text">{{service.rating}}</text>
            </view>
            <view class="stat">
              <image src="/static/images/volunteer/user-group.png" class="stat-icon"></image>
              <text class="stat-text">{{service.completedCount}}人完成</text>
            </view>
          </view>
          <view class="service-reward">
            <text class="reward-text">{{service.reward}}积分/次</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <navigator url="/pages/volunteerInterface/service" class="nav-item active">
        <image src="/static/images/volunteer/home-s.png" class="nav-icon"></image>
        <text>首页</text>
      </navigator>
      <navigator url="/pages/volunteerInterface/process" class="nav-item">
        <image src="/static/images/volunteer/process.png" class="nav-icon"></image>
        <text>任务</text>
      </navigator>
      <navigator url="/pages/volunteerInterface/messages" class="nav-item">
        <image src="/static/images/volunteer/info.png" class="nav-icon"></image>
        <text>消息</text>
        <view class="nav-badge" v-if="unreadMessages > 0">{{unreadMessages}}</view>
      </navigator>
      <navigator url="/pages/volunteerInterface/me" class="nav-item">
        <image src="/static/images/volunteer/my.png" class="nav-icon"></image>
        <text>我的</text>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张志愿者',
        level: '高级志愿者',
        avatar: '/static/images/volunteer/avatar.png'
      },
      stats: {
        completedServices: 28,
        currentPoints: 1560,
        rating: 4.9
      },
      searchKeyword: '',
      hasNewNotifications: true,
      unreadMessages: 3,
      todayTasks: [
        {
          id: 1,
          title: '陪伴李奶奶就医',
          status: 'pending',
          time: '今天 14:00-16:00',
          location: '幸福小区3栋201',
          elderlyName: '李奶奶',
          elderlyAge: 78,
          reward: 50
        },
        {
          id: 2,
          title: '帮助王爷爷购物',
          status: 'accepted',
          time: '今天 10:00-11:00',
          location: '阳光家园5栋302',
          elderlyName: '王爷爷',
          elderlyAge: 82,
          reward: 30
        },
        {
          id: 3,
          title: '电话关怀赵奶奶',
          status: 'completed',
          time: '今天 09:00-09:30',
          location: '远程服务',
          elderlyName: '赵奶奶',
          elderlyAge: 75,
          reward: 15
        }
      ],
      recommendedServices: [
        {
          id: 1,
          name: '就医陪同',
          description: '陪伴老人看病取药',
          image: '/static/images/volunteer/service-medical.png',
          rating: 4.8,
          completedCount: 156,
          reward: 50
        },
        {
          id: 2,
          name: '生活购物',
          description: '帮助老人采购生活用品',
          image: '/static/images/volunteer/service-shopping.png',
          rating: 4.9,
          completedCount: 203,
          reward: 30
        },
        {
          id: 3,
          name: '心理陪伴',
          description: '陪伴聊天，心理疏导',
          image: '/static/images/volunteer/service-companion.png',
          rating: 4.7,
          completedCount: 178,
          reward: 25
        },
        {
          id: 4,
          name: '家政协助',
          description: '简单家务整理协助',
          image: '/static/images/volunteer/service-housework.png',
          rating: 4.6,
          completedCount: 132,
          reward: 40
        }
      ]
    }
  },
  onLoad() {
    this.loadVolunteerData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    loadVolunteerData() {
      // 加载志愿者数据
      console.log('加载志愿者首页数据')
    },
    refreshData() {
      // 模拟刷新数据
      setTimeout(() => {
        uni.stopPullDownRefresh()
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        })
      }, 1000)
    },
    searchTasks() {
      if (!this.searchKeyword.trim()) {
        uni.showToast({
          title: '请输入搜索关键词',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/volunteer/searchResult/searchResult?keyword=${this.searchKeyword}`
      })
    },
    goToNotifications() {
      uni.navigateTo({
        url: '/pages/volunteer/notifications/notifications'
      })
    },
    goToAvailableTasks() {
      uni.navigateTo({
        url: '/pages/volunteer/availableTasks/availableTasks'
      })
    },
    goToMyServices() {
      uni.navigateTo({
        url: '/pages/volunteer/myServices/myServices'
      })
    },
    goToPointsMall() {
      uni.navigateTo({
        url: '/pages/volunteer/pointsMall/pointsMall'
      })
    },
    goToTraining() {
      uni.navigateTo({
        url: '/pages/volunteer/training/training'
      })
    },
    viewTaskDetail(taskId) {
      uni.navigateTo({
        url: `/pages/volunteer/taskDetail/taskDetail?id=${taskId}`
      })
    },
    viewServiceDetail(serviceId) {
      uni.navigateTo({
        url: `/pages/volunteer/serviceDetail/serviceDetail?id=${serviceId}`
      })
    },
    handleTaskAction(task) {
      switch(task.status) {
        case 'pending':
          this.acceptTask(task.id)
          break
        case 'accepted':
          this.completeTask(task.id)
          break
        case 'completed':
          this.viewTaskDetail(task.id)
          break
      }
    },
    acceptTask(taskId) {
      uni.showModal({
        title: '确认接单',
        content: '确定要接受这个任务吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟接单成功
            const taskIndex = this.todayTasks.findIndex(task => task.id === taskId)
            if (taskIndex !== -1) {
              this.todayTasks[taskIndex].status = 'accepted'
            }
            uni.showToast({
              title: '接单成功',
              icon: 'success'
            })
          }
        }
      })
    },
    completeTask(taskId) {
      uni.showModal({
        title: '确认完成',
        content: '请确认已完成了这个任务？',
        success: (res) => {
          if (res.confirm) {
            // 模拟完成任务
            const taskIndex = this.todayTasks.findIndex(task => task.id === taskId)
            if (taskIndex !== -1) {
              this.todayTasks[taskIndex].status = 'completed'
              this.stats.completedServices += 1
              this.stats.currentPoints += this.todayTasks[taskIndex].reward
            }
            uni.showToast({
              title: '任务完成',
              icon: 'success'
            })
          }
        }
      })
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待接受',
        'accepted': '进行中',
        'completed': '已完成'
      }
      return statusMap[status] || '未知状态'
    },
    getActionText(status) {
      const actionMap = {
        'pending': '接受任务',
        'accepted': '标记完成',
        'completed': '查看详情'
      }
      return actionMap[status] || '查看'
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}

.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 100px;
}

/* 顶部区域 */
.top-area {
  padding: 20px;
  padding-top: 40px;
  background: linear-gradient(135deg, #FD995E 0%, #FFB74D 100%);
  color: white;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 4px 12px rgba(253, 153, 94, 0.3);
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.user-avatar-section {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  margin-right: 15px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-level {
  font-size: 14px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  align-self: flex-start;
}

.notification-bell {
  position: relative;
  padding: 10px;
}

.bell-icon {
  width: 24px;
  height: 24px;
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF5722;
}

/* 统计卡片 */
.stats-cards {
  display: flex;
  justify-content: space-between;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
}

/* 搜索区域 */
.search-section {
  padding: 20px;
  background-color: white;
  margin-top: -10px;
  border-radius: 15px;
  margin: -10px 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 25px;
  padding: 5px 5px 5px 15px;
}

.search-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
}

.search-btn {
  background-color: #FD995E;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(253, 153, 94, 0.3);
}

/* 区域标题 */
.section-title {
  padding: 20px 20px 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.more_box {
  font-size: 14px;
  color: #FD995E;
  font-weight: normal;
}

/* 快捷功能 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 10px 20px 20px;
  background-color: white;
  margin: 0 15px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.q-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 5px;
  border-radius: 12px;
  transition: all 0.2s;
}

.q-item:active {
  background-color: #FFF8F0;
  transform: scale(0.95);
}

.action-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #FFF8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.action-icon {
  width: 24px;
  height: 24px;
}

.q-text {
  font-size: 14px;
  color: #333;
  text-align: center;
}

/* 任务列表 */
.task-list {
  padding: 0 15px 15px;
  background-color: white;
  margin: 0 15px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.task-card {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.task-card:active {
  background-color: #f9f9f9;
}

.task-card:last-child {
  border-bottom: none;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.task-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}

.task-pending {
  background-color: #FFF3E0;
  color: #FF9800;
}

.task-accepted {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.task-completed {
  background-color: #F5F5F5;
  color: #9E9E9E;
}

.task-info {
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-reward {
  font-size: 16px;
  font-weight: bold;
  color: #FD995E;
}

.task-action-btn {
  background-color: #FD995E;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 6px 15px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(253, 153, 94, 0.3);
}

.task-action-btn:active {
  transform: scale(0.95);
}

/* 服务网格 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 0 15px 15px;
  background-color: white;
  margin: 0 15px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.service-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  border: 1px solid #f0f0f0;
}

.service-card:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(253, 153, 94, 0.1);
}

.service-image {
  width: 100%;
  height: 120px;
}

.service-content {
  padding: 12px;
}

.service-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.service-desc {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
}

.service-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stat {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

.stat-text {
  font-size: 11px;
  color: #666;
}

.service-reward {
  text-align: center;
  padding: 6px 0;
  background-color: #FFF8F0;
  border-radius: 6px;
}

.reward-text {
  font-size: 14px;
  font-weight: bold;
  color: #FD995E;
}

/* 底部导航栏 */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: black;
  padding: 0 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #f0f0f0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #999;
  position: relative;
  transition: all 0.2s;
}

.nav-item.active {
  color: #FD995E;
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.nav-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #FF5722;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>